<template>
  <div id="codemirror"></div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'

export default {
  mounted() {
    // 初始化CodeMirror
    this.editor = CodeMirror(document.getElementById('codemirror'), {
      value: '{\n  "key": "value"\n}', // 初始内容
      mode: 'application/json', // 设置JSON模式
      theme: 'base16-dark', // 设置主题
      lineNumbers: true, // 显示行号
      indentUnit: 2, // 缩进单位
      autocorrect: true // 自动纠正
    })
  },
  beforeDestroy() {
    // 销毁CodeMirror实例
    if (this.editor) {
      this.editor.toTextArea()
    }
  }
}
</script>

<style>
/* 确保CodeMirror完全覆盖组件区域 */
#codemirror {
  height: 100%;
  width: 100%;
}
</style>